import React from 'react';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Chat from '../chat/chat';
import Address from '../address/address';
import Find from '../find/find';
import Center from '../center/center';
import Swiper from 'swiper';
import {createHashHistory} from 'history'; // 如果是hash路由
import {createBrowserHistory} from 'history'; // 如果是history路由
import 'swiper/css/swiper.css'
import "../../style/home.css"
import "../../style/common.less"
import Common from "../common/common";

class Home extends Common {

    constructor(props) {
        super(props)
        // createHashHistory.push("/")
        this.mySwiper = null;
    }

    componentDidMount() {
        this.mySwiper = new Swiper('.swiper-container', {
            autoplay: false,//可选选项，自动滑动
        })
    }

    render() {
        return (
            <div className="maxHeight homeContent">
                <AppBar position="static" className="homeHeader">
                    <Toolbar>
                    </Toolbar>
                </AppBar>
                <div className="homeMain ">
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <Chat/>
                            </div>
                            <div className="swiper-slide">
                                <Address/>
                            </div>
                            <div className="swiper-slide">
                                <Find/>
                            </div>
                            <div className="swiper-slide">
                                <Center/>
                            </div>
                        </div>
                    </div>
                </div>
                <BottomNavigation
                    className="homeBottom"
                    onChange={(event, newValue) => {
                        if(newValue==3){
                            this.props.history.push("/login")
                        }else {
                            this.mySwiper.slideTo(newValue, 0);
                        }
                    }}
                    showLabels
                >
                    <BottomNavigationAction label="微信" icon="❤️"/>
                    <BottomNavigationAction label="通讯录" icon="🌭"/>
                    <BottomNavigationAction label="发现" icon="🍯"/>
                    <BottomNavigationAction label="我" icon="👨‍"/>
                </BottomNavigation>
            </div>

        )
    }
}

export default Home
